<?php

use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use website\helpers\Render;
use common\models\Design;
use common\models\UserCollection;

$this->addCrumbs('设计师作品', 'search/design');
$this->title = Render::interceptHtml($design->title, 16);
?>
<link rel="stylesheet" href="<?= Url::to('@web/static/css/user.css') ?>">
<style>
    #designer-header {padding-bottom:20px;color:#fff;background-color:rgba(0,0,0,.5);}
    #designer-header a:hover,
    #designer-header a {color:#fff;}
    #basic-information {height:260px;padding-top:20px;}
    #photo,
    #good-at,
    #employ {float:left;width:33.33333%;}
    #photo {}
    #photo img {height:260px;width:260px;border-radius:100%;}
    #good-at {margin-top:50px;line-height:30px;}
    #employ {margin-top:100px;font-size:16px;}

    #design-describe {line-height:30px;padding:30px;}
    #design-describe h3 {margin-bottom:10px;font-size:20px;}
    #design-imager {padding:0 30px 30px 30px;}
    #design-imager img {width:100%;height:auto;}
    #design-list .panel {position:relative;}
    #design-list .panel .collection-data {position:absolute;top:10px;right:10px;display:none;}
    #design-list .panel:hover .collection-data {display:block;}

</style>

<div id="designer-header">
    <div class="contenter">
        <?= $this->render('/layouts/break-crumbs') ?>

        <div class="clear" id="basic-information">
            <div id="photo"><img src="<?= Render::upload($design->designer->photo) ?>"></div>
            <div id="good-at">
                <p class="fs-18px"><?= $design->designer->nickname ?>（<?= '**'.mb_substr($design->designer->realname,-1,1,'utf-8')?>）</p>
                <p>擅长类目：<span class="categories"><?= implode(',', ArrayHelper::getColumn($design->designer->categories, 'category_id')) ?></span></p>
                <p>擅长风格：<span class="styles"><?= Render::text(Design::$styleSelector, ArrayHelper::getColumn($design->designer->styles, 'category_id'), false) ?></span></p>
                <p>擅长软件：<?= Render::value($design->designer, 'skills', '---') ?></p>
                <p>
                    <span class="mr-40px">标签：<?= Render::value($design->designer, 'tags', '---') ?></span>
                </p>
            </div>
            <div id="employ">
                <p>月薪要求：<span class="cl-red fs-24px mr-20px">￥<?= Render::amount($design->designer->salary, 0) ?></span></p>
                <p class="mt-40px">
                    <a class="flyer-button normal border-round" href="<?= Url::to('@web/seer/resume?id='.$design->designer->id) ?>">查看简历</a>
                    <a class="flyer-button normal border-round" href="<?= Url::to('@web/employer/employment?designer_id='.$design->designer->id) ?>">雇佣TA</a>
                </p>
            </div>
        </div>
    </div>
</div>
<div class="contenter box-shadow mb-20px">
    <div id="design-describe">
        <h3><?= $design->title ?></h3>
        <p>本案例由 <?= $design->designer->nickname ?>（<?= $design->designer->realname ?>）原创，未经作者允许，禁止转载或商业使用</p>
        <p>作品风格：<?= Render::show(Design::$styleSelector, $design['style']) ?></p>
        <p>上传时间：<?= date('Y-m-d H:i:s', $design->created_at) ?></p>
    </div>
    <div id="design-imager">
        <img src="<?= Render::upload($design->image) ?>">
    </div>
</div>
<div class="contenter box-shadow mb-20px">
    <div class="sub-title ml-10px pt-10px"><i></i>作者的其他作品<span class="english">Other Works Of The Author</span></div>
    <div class="conter clear" id="design-list"></div>
</div>

<div id="render" style="display:none;">
    <?= Render::select('style', \common\models\Design::$styleSelector, null) ?>
</div>
<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tabler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/categorier.class.js') ?>"></script>
<script src="<?= Render::static('system/category-design.data.js') ?>"></script>
<script>
    var categorierClass = new categorier();
    $(document).ready(function() {
        // 设置分类内容
        categorierClass.setData(DesignCategories).setRelate(DesignCategoriesRelation);
        tableHandler.renderCategory({ category: $('#basic-information .categories'), color: false, splite: '，', functionName: function(id) {
            return categorierClass.renderTitles(id, false);
        }});
        // 初始化表格异步加载事件
        (new tabler).init({
            // 请求地址
            url: '<?= Url::to('@web/search/designer-design?designer_id='.$design->designer_id) ?>', showLoading: false,
            // 数据渲染配置
            table: '#design-list', template: 'info-template', readyCall: true,
            afterPost: function(param) {
                tableHandler.renderCategory({ category: $('.styles'), select: '#render select[name=style]', color: false, splite: '，', default: '--' });
                // 初始化 收藏按钮事件
                tableHandler.requestSingle({
                    button: $(param.tabler).find('.collection-data'), url: "<?= Url::to('@web/user/collection') ?>", isConfirm: false, trKey: '.design-detail',
                    beforePost: function(params) {
                        params.data = { handle: $(params.mthis).attr('data-handle'), id: $(params.tr).attr('data-id'), type: '<?= UserCollection::TypeDesign ?>' };
                    },
                    requestSuccess: function(params) {
                        if($(params.mthis).attr('data-handle') == 'collection') {
                            $(params.mthis).attr('data-handle', 'revoke').html('取消收藏');
                        }
                        else {
                            $(params.mthis).attr('data-handle', 'collection').html('加入收藏');
                        }
                    }
                });
            }
        });
    });
</script>
<script id="info-template" type="text/html">
    {{if infos != undefined && infos.length}}
    {{each infos as info key}}
    <div class="design-detail split4 boxing transition" id="tr-{{info.id}}" data-id="{{info.id}}">
        <div class="panel">
            <div class="imager" style="background-image:url(<?= Render::upload('{{info.thumb}}') ?>);">
                <a href="<?= Url::to('@web/seer/design?id={{info.id}}') ?>"></a>
            </div>
            <div class="bodyer">
                <div class="title">{{info.title}}<span class="design-style styles">{{info.style}}</span></div>
                <div class="user clear">
                    <div class="view"><i class="icon-eye-open"></i>{{info.view}}</div>
                    <div class="collection"><i class="icon-heart cl-red"></i>{{info.collection}}</div>
                    <div class="username"><p>{{info.designer.nickname}}</p><p class="cl-red fs-12px">{{info.designer.star | star}}</p></div>
                </div>
            </div>
            <?php if(Yii::$app->isLogin() && Yii::$app->user->employer()) { ?>
                {{if collection[info.id]}}
                <button class="collection-data flyer-button normal border-round narrow thin" data-handle="revoke">取消收藏</button>
                {{else}}
                <button class="collection-data flyer-button normal border-round narrow thin" data-handle="collection">加入收藏</button>
                {{/if}}
            <?php } ?>
        </div>
    </div>
    {{/each}}
    {{else}}
    <div class="pd-10px"><i class="icon-ban-circle"></i> 暂时没有找到相匹配的作品！</div>
    {{/if}}
</script>